import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { Tabs } from 'antd';
const { TabPane } = Tabs;
import _ from 'lodash';
const TabList = [
  {
    name: '目标组管理',
    router: '/asset-config/target-manage'
  },
  {
    name: '端口策略管理',
    router: '/asset-config/port-manage'
  },
  {
    name: '禁扫目标管理',
    router: '/asset-config/white-list'
  },
  {
    name: '探测策略管理',
    router: '/asset-config/probe-strategy'
  },
  {
    name: '扫描速率管理',
    router: '/asset-config/scan-speed'
  },
  {
    name: '漏洞策略管理',
    router: '/asset-config/strategy-template'
  },
  {
    name: '字典配置管理',
    router: '/asset-config/dict-config'
  }
];
const TemplateSettings = props => {
  const { history, modules } = props;
  const [activeTab, setActiveTab] = useState();
  const [list, setList] = useState(TabList);
  const callback = key => {
    history.push(key);
  };
  useEffect(() => {
    setActiveTab(history.location.pathname);
    const hasOneDayModule = modules.includes('1day');
    if (!hasOneDayModule) {
      setList(TabList.slice(0, 5));
    }
  }, []);
  return (
    <>
      <Tabs activeKey={activeTab} onTabClick={callback}>
        {list.map(r => {
          return <TabPane tab={r.name} key={r.router} />;
        })}
      </Tabs>
    </>
  );
};

const mapStateToProps = state => {
  return {
    modules: _.get(state, 'auth.cert.modules', [])
  };
};

TemplateSettings.propTypes = {
  history: PropTypes.object,
  assetManageActions: PropTypes.object,
  modules: PropTypes.array
};
export default connect(mapStateToProps)(TemplateSettings);
